{% extends 'oracle/base.html' %}
{% load static %}
{% load oracle %}

{% block css %}
    <link href="{% static 'oracle/css/plugins/zTree/css/metroStyle/metroStyle.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
    {% include 'oracle/include/menu_list_modal.html' %}

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-4">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>菜单列表</h5>
                        <div class="ibox-tools">
                            {% if request|has_permission:'oracle:multi_permission_add' %}
                                <a class="btn btn-primary btn-rounded btn-sm"
                                   href="{% url 'oracle:multi_permission_add' %}">
                                    <i class="fa fa-superpowers"></i> 批量注册权限
                                </a>
                            {% endif %}
                            <a class="btn btn-info btn-rounded btn-sm" href="{% url 'oracle:menu_link_add' %}"
                               style="color: white!important;">
                                <i class="fa fa-cubes"></i> 菜单关联权限
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="d-none">{% csrf_token %}<input name="render" value="external"></form>
                        <ul id="MenuTree" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 d-none" id="menu_detail">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>菜单详情</h5>
                        <div class="ibox-tools">
                            {% if request|has_permission:'oracle:permission_add' %}
                                <a class="btn btn-primary btn-rounded btn-sm" href="{% url 'oracle:permission_add' %}"
                                   id="permission_add">
                                    <i class="fa fa-plus"></i> 新建权限
                                </a>
                            {% endif %}
                            {% if request|has_permission:'oracle:permission_edit' %}
                                <a class="btn btn-info btn-rounded btn-sm" href="{% url 'oracle:permission_edit' 0 %}"
                                   style="color: white!important;" id="permission_edit">
                                    <i class="fa fa-paint-brush"></i> 修改权限
                                </a>
                            {% endif %}
                            {% if request|has_permission:'oracle:permission_del' %}
                                <a class="btn btn-danger btn-rounded btn-sm" href="{% url 'oracle:permission_del' 0 %}"
                                   style="color: white!important;" id="permission_delete">
                                    <i class="fa fa-trash"></i> 删除权限
                                </a>
                            {% endif %}
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">Menu</th>
                                <th scope="col">Icon</th>
                                <th scope="col">PName & URL</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td id="menu_detail_name" rowspan="2"></td>
                                <td id="menu_detail_icon" rowspan="2"></td>
                                <td id="menu_detail_code"></td>
                            </tr>
                            <tr>
                                <td id="menu_detail_permission" style="border-top: none"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 d-none" id="menu_rel">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>关联菜单详情</h5>
                        <div class="ibox-tools">
                            <a class="btn btn-info btn-circle collapse-link" type="button"
                               style="color: white!important;">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">CODE & URL</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'oracle/js/plugins/zTree/js/jquery.ztree.core.min.js' %}"></script>
    <script src="{% static 'oracle/js/plugins/zTree/js/jquery.ztree.exedit.min.js' %}"></script>
    <script src="{% static 'oracle/js/plugins/sweetalert/sweetalert.min.js' %}"></script>
    <script>
        let menu_add_url = "{% url 'oracle:menu_add' %}";
        let menu_info_url = "{% url 'oracle:menu_list' %}";
        let menu_edit_url_base = "{% url 'oracle:menu_edit' 0 %}";
        let menu_del_url_base = "{% url 'oracle:menu_del' 0 %}";
    </script>
    <script src="{% static 'oracle/js/menu_tree.js' %}"></script>
{% endblock %}
